@extends('layouts.template')

@section('title', '个人中心')

@section('header')
@endsection

@section('content')
    <script src="{{asset('dist/wallet/password.js')}}"></script>
    <script>
        var phone = '{{$phone}}';
    </script>
    <article id="article" v-cloak>
        <form v-show="!smsVerified" id="sendVerifyForm">
            <div class="wallet01"><p>为了保证密码安全，请先进行手机验证</p></div>
            <div class="wallet02"><p><i>手机号码</i><em><a @click="sendSmsVerify">发送验证码</a></em>{{$phone}}</p>
                <p style="border-bottom:none"><i>验证码</i><input name="verifyCode" type="text" class="inp_04" placeholder="请输入验证码"></p>
            </div>
            <a class="but04 mar07" @click="smsVerify">下一步</a>
        </form>
        <form v-show="smsVerified" action="" method="post" id="form">
            {{csrf_field()}}
            <div class="wallet01"><p>请设置您的密码(6-20位)</p></div>
            <div class="wallet02">
                <p style="border-bottom:none"><i>设置密码</i><input name="wallet_password" type="password" class="inp_04" placeholder="必须是数字和字母组合，6-20位字符"></p>
                <p style="border-bottom:none"><i>密码确认</i><input name="wallet_password_confirm" type="password" class="inp_04" placeholder="请再次输入钱包密码"></p>
            </div>
            <button class="but04 mar07" type="submit">提交</button>
        </form>
    </article>
@endsection